<template>
  <dl class="p-product">
    <dt>
      <span>{{ idx | addOne }}</span>
      <img 
        :src="meta.img" 
        alt="商品图片"
      >
    </dt>

    <dd>
      <h3><nuxt-link :to="{path: 'detail', query: {keyword: meta.name, type: meta.module}}">{{ meta.name }}</nuxt-link></h3>

      <el-rate
        v-model="meta.rate"
        :colors="['#ff9900', '#ff9900', '#ff9900']"
        disabled
      />

      <span
        v-if="meta.rate > 4"
        class="s-item-comment"
      >很好</span><span
        v-else-if="meta.rate > 3"
        class="s-item-comment"
      >一般</span><span
        v-else
        class="s-item-comment"
      >很差</span>

      <span class="s-item-value">{{ meta.rate }}分</span>
      <span class="s-item-comment-total">{{ meta.comment }}人评论</span>

      <p>
        <span 
          v-for="(type, index) of types"
          :key="index"
          class="s-item-type"
        >
          {{ type }}
        </span>
        <span class="s-item-addr">{{ meta.addr }}</span>
      </p>

      <p>
        <em class="s-item-price">￥<i>{{ meta.price }}</i>起</em>
        <b>{{ meta.status }}</b>
      </p>

      <ul>
        <li v-if="meta.scene && meta.scene.length">
          <span class="detail-type">景酒</span>{{ meta.scene }}
        </li>

        <li v-else>
          <span class="detail-type">景酒</span>暂无描述
        </li>
      </ul>
    </dd>
  </dl>
</template>

<script>
export default {
  filters: {
    addOne(val) {
      return val + 1
    }
  },
  props: {
    meta: {
      type: Object,
      default() {
        return {}
      }
    },
    idx: {
      type: Number,
      default: 0
    }
  },
  computed: {
    types() {
      return this.meta.type.split(';')
    }
  }
}
</script>

<style lang="stylus" scoped>
  .p-product
    position relative
    padding 20px 0
    min-height 125px
    border-top 1px solid #e5e5e5
    dt
      position relative 
      background #ffffff
      width 220px
      height auto
      border-radius 4px
      span 
        position absolute 
        width 20px
        margin-left -3px
        margin-top 3px
        background-color #fb6433
        border-radius 2px
        line-height 13px
        text-align center
        font-size 12px
        color #ffffff
      img
        width 100%
        border-radius 4px
    dd
      overflow hidden
      position absolute
      top 0
      margin-left 220px
      padding-top 20px
      padding-left 20px
      font-size 12px
      color #666
      h3
        font-size 16px
        font-weight 500
        a
          color #333
      .el-rate
        & >>> .el-rate__item
          height 25px
          line-height 35px
          .el-rate__icon
            font-size 14px !important 
      .s-item-value
        margin 0 10px
      p
        height 30px
        line-height 30px
        .s-item-type
          margin-right 10px
          padding 3px 10px
          background-color #31bbac
          border-radius 20px
          color #ffffff
        .s-item-price
          color #f60
          font-style normal 
          i
            line-height 1
            vertical-align text-bottom
            font-size 18px
            font-style normal
        b
          margin-left 10px
      ul
        padding 10px 15px
</style>
